<template>
	<div class="zh-table">
		<div class="zh-table-open clear">
			<div class="zh-open-left fl">
				<div class="open-width" style="width: 270px">
					<el-input v-model="keyword" placeholder="请输入教室名搜索" @keyup.enter.native="searchFunc" ></el-input>
				</div>
				<el-button type="primary" @click="searchFunc">搜索</el-button>
				<el-button type="primary" @click="reset">重置</el-button>
			</div>
			<div class="zh-open-right fr">
				<el-button type="primary"  @click="saveBox()">新增</el-button>
			</div>
		</div>
		<div class="zh-table-contents">
			<el-table
			    :data="listData"
			    border
			    max-height="600"
			    style="width: 100%">
			  	<el-table-column
			      type="index"
                  :index="typeIndex"
			      label="序号"
			      align="center"
			      show-overflow-tooltip
			      width="50"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="教室名"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="in_name"
			      label="校园分区"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="comment"
			      label="注释"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="4"
			      label="状态"
			      align="center"
			      show-overflow-tooltip	
			      >
			      	<template slot-scope="scope">
			      		<template v-if="parseInt(scope.row.status) === 1">
			      			<el-button  plain @click="change_confirm(scope.row,2)" size="mini">已启用</el-button>
			      		</template>
			      		<template v-if="parseInt(scope.row.status) === 2">
			      			<el-button plain @click="change_confirm(scope.row,1)" size="mini">已禁用</el-button>
			      		</template>
			      		
			      	</template>
			    </el-table-column>
			    <el-table-column
			      prop="5"
			      label="操作"
			      align="center"
			      width="100"
			      show-overflow-tooltip
			      >
      		      	<template slot-scope="scope">
      	      	        <el-button @click="saveBox(scope.row)" type="text" >编辑</el-button>
      	      	        <el-button @click="change_confirm(scope.row,0)" type="text" class="delete-button">删除</el-button>
      	      	    </template>
			    </el-table-column>
			</el-table>
			<div class="table-pagination" v-show="total_number > 10">
				<el-pagination
				    @size-change="handleSizeChange"
				    @current-change="handleCurrentChange"
				    :current-page="listParam.page_index"
				    :page-sizes="[10, 20, 30, 40, 50, 100]"
				    :page-size="listParam.page_size"
				    layout="total, sizes, prev, pager, next, jumper"
				    :total="total_number">
				</el-pagination>
				<div class="pagination-button">
					<el-button 
						@click="getList"
						type="primary" icon="el-icon-refresh" 
						circle title="刷新数据" size="mini" >
					</el-button>
				</div>
			</div>
		</div>
		<!-- 添加多媒体教室 -->
		<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="multimediaClassroom" class="multimediaClassroom" width="450px">
			<el-form :model="addForm" ref="addForm" :rules="rules" status-icon label-position="left" label-width="100px">
				<el-form-item label="教室名称" prop="name">
			      	<el-input 
			      		v-model="addForm.name" 
			      		placeholder="请输入教室名称" 
			      		autocomplete="off" 
			      		:maxlength="parseInt(10)"
			      		clearable>
			      	</el-input>
			    </el-form-item>
				<el-form-item label="校园分区" prop="inspection_id">
			      	<el-select v-model="addForm.inspection_id" filterable placeholder="请选择校园分区">
			      		 <el-option 
					      v-for="item in orgData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
			      	</el-select>
			    </el-form-item>
			    <el-form-item label="注释" prop="comment">
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 4, maxRows: 4}"
					  maxlength="200"
					  placeholder="请输入教室注释"
					  v-model="addForm.comment">
					</el-input>
			    </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="multimediaClassroom = false">取消</el-button>
			    <el-button type="primary"  @click="saveClassRoom">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		        listData:[],
		        keyword:'',
		    	listParam:{
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
		        },
		        total_number:0,
		        multimediaClassroom: false,
		    	addForm:{
		    		id:0,
		    		name:'',
		    		inspection_id:'',
		    		comment:'',
		    	},
		    	rules:{
		    		inspection_id: [
        	            { validator: this.checkChange, trigger: 'change', required: true }
        	        ],
        	        name: [
						{ validator: this.validateName, trigger: 'blur', required: true },
						{ pattern: this.rules.chinese.reg, message: this.rules.chinese.msg, trigger: 'blur'}
        	        ],
        	        comment: [
        	            { validator: this.validateComment, trigger: 'blur', required: true }
        	        ],
		    	},
		    	status_arr:{1:'启用',2:'禁用',0:'删除'},
		    	orgData:[],
		    	title: '',
		    }
		},
		created(){
			this.getList();
			this.getData();
		},
		watch:{
			multimediaClassroom(){
				if (this.multimediaClassroom === false)
					this.$refs.addForm.resetFields()
			}
		},
		methods: {
			searchFunc(){
				this.listParam.keyword = this.keyword;
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
				this.keyword = '';
				this.listParam = {
					keyword: '',
		       		page_index:1,
		       		page_size:10,
				}
				this.getList();
			},
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			saveBox( obj = null ){
				this.title = '添加多媒体教室'
				if( !is_empty(obj) ){
					this.addForm = deep_clone( obj )
					this.title = '编辑多媒体教室'
				}else{
					this.addForm = {
				    		id:0,
				    		name:'',
				    		inspection_id:'',
				    		comment:'',
				    	}
				}
				this.multimediaClassroom = true;
			},
			saveClassRoom(){
				this.$refs.addForm.validate((valid) => {
	     			if (valid) {
						let success = (data => {
							this.$message.success(data.msg);
							this.getList();
							this.multimediaClassroom = false;
							
						})
						if( !is_empty(this.addForm.id) &&  parseInt(this.addForm.id) > 0 ){
							this.$ajax.put('api/school/class_room',this.addForm,{func:{success:success}})
						}else{
							this.$ajax.post('api/school/class_room',this.addForm,{func:{success:success}})
						}
					} else {
		  				return false
		  			}
		  		});
			},
			validateName(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入教室名称'));
                } else if (!validateName(value)){
                	return callback(new Error('不能输入空格符号'));
                } else {
                	callback()
                }
			},
			validateComment(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入教室注释'));
                } else if (!validateName(value)){
                	return callback(new Error('不能输入空格符号'));
                } else {
                	callback()
                }
			},
			checkChange(rule, value, callback){
                if (!isEmpty(value)) {
                    return callback(new Error('请选择选项'));
                }else{
                    callback()
                }
            },

            getData(){
				// 重写成功回调
				let success = ( data => {
					this.orgData = data.data;
					this.$forceUpdate();//强制渲染
				});
	
  				this.$ajax.get('api/school/inspection_data',{params:{type:'name'},func:{success:success}})
		    },
			getList(){
            	let success = (data=>{
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/school/class_room',{params: this.listParam,func:{success:success}})
            },
            change_confirm(obj,status){
				let yes = ( data => {
					this.change(obj.id,status);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 标记为 '+this.status_arr[parseInt(status)]+' 吗？'});

			},
		    change(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg)

					if (status === 0) {
						if (this.listData.length - 1 === 0) {
							if (this.listParam.page_index > 1) {
								this.listParam.page_index-- ;
							} else {
								this.listParam.page_index = 1;
							}
						}
					}
					
					this.getList();
				});
		    	this.$ajax.put('api/school/change_class_room',{id:id,status:status},{func:{success:success}})
		    },
		    
		     handleSizeChange(val) {
		     	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		},
  	}
</script>
